import React, { PureComponent } from 'react'
import './index.css'

export default class Demo6 extends PureComponent {
  render() {
    return (
      <div>
        <Parent/>    
      </div>
    )
  }
}

class Parent extends PureComponent {

  state={
    carName:'奔驰c63'
  }

  //重写子组件的shouldComponentUpdate方法，根据state的状态进行判断是否需要渲染
  // shouldComponentUpdate(nextProps,nextState){
  //   return nextState.carName!==this.state.carName
  // }

  render() {
    console.log('Parent render run')
    const { carName } = this.state
    return (
      <div className='parent'>
        <h2>我是Parent组件</h2>
        我的车是：{carName}
        <br/>
        <button onClick={()=>this.setState({carName:'迈巴赫'})}>点我换车</button>
        <Child carName={carName}/>
      </div>
    )
  }
}

class Child extends PureComponent {

  //重写子组件的shouldComponentUpdate方法，根据父组件传入的nextProps或nextState进行判断是否需要渲染
  // shouldComponentUpdate(nextProps){
  //   return this.props.carName!==nextProps.carName
  // }

  render() {
    console.log('Child render run')
    const { carName } = this.props
    return (
      <div className='child'>
        <h2>我是Child组件</h2>
        我接到的车是：{carName}
      </div>
    )
  }
}
